<template>
  <view class="container">
    <up-form labelPosition="left" :model="form" :rules="rules" ref="formRef">
      <up-form-item
        label="队伍名称"
        prop="teamName"
        borderBottom
        label-width="150rpx"
      >
        <up-input
          v-model="form.teamName"
          border="none"
          placeholder="请输入队伍名称"
        ></up-input>
      </up-form-item>
      <up-form-item
        label="描述"
        prop="description"
        borderBottom
        label-width="150rpx"
      >
        <up-textarea
          placeholder="请输入队伍描述"
          v-model="form.description"
          count
        ></up-textarea>
      </up-form-item>
      <up-form-item
        label="过期时间"
        prop="expireTime"
        borderBottom
        label-width="150rpx"
        @click="showDate = true"
      >
        <up-input
          v-model="form.expireTime"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择过期时间"
          border="none"
        ></up-input>
        <template #right>
          <up-icon name="arrow-right"></up-icon>
        </template>
      </up-form-item>
      <up-form-item
        label="最大人数"
        prop="maxNum"
        borderBottom
        label-width="150rpx"
      >
        <up-number-box :min="1" :max="5" v-model="form.maxNum"></up-number-box>
      </up-form-item>
      <up-form-item
        label="队伍状态"
        prop="teamState"
        borderBottom
        label-width="150rpx"
      >
        <up-radio-group v-model="form.teamState">
          <up-radio
            :customStyle="{ marginRight: '16px' }"
            v-for="(item, index) in teamStateList"
            :key="index"
            :label="item.name"
            :name="item.teamState"
          ></up-radio>
        </up-radio-group>
      </up-form-item>
      <up-form-item
        label="队伍密码"
        prop="teamPassword"
        borderBottom
        label-width="150rpx"
        v-if="form.teamState == 2"
      >
        <up-input
          v-model="form.teamPassword"
          border="none"
          placeholder="请输入队伍密码"
        ></up-input>
      </up-form-item>
    </up-form>
    <up-button
      type="primary"
      text="提交"
      customStyle="margin-top: 50px"
      @click="submit"
      shape="circle"
    ></up-button>
    <up-button
      type="error"
      text="重置"
      customStyle="margin-top: 10px"
      @click="reset"
      shape="circle"
    ></up-button>
    <up-datetime-picker
      :minDate="new Date(Date.now() + 24 * 60 * 60 * 1000)"
      :show="showDate"
      v-model="expireTime"
      mode="date"
      closeOnClickOverlay
      @confirm="dateConfirm"
      @cancel="dateClose"
      @close="dateClose"
    ></up-datetime-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import myAxios from '@/plugins/myAxios'
const formRef = ref(null)
const showDate = ref(false)
const expireTime = ref(Number(new Date(Date.now() + 24 * 60 * 60 * 1000)))
const form = reactive({
  teamName: '',
  expireTime: new Date(Date.now() + 24 * 60 * 60 * 1000)
    .toISOString()
    .split('T')[0],
  teamState: null,
  description: '',
  teamPassword: '',
  maxNum: 1
})

// 队伍状态选项
const teamStateList = [
  { name: '公开', disabled: false, teamState: 0 },
  { name: '私密', disabled: false, teamState: 1 },
  { name: '加密', disabled: false, teamState: 2 }
]

// 校验规则
const rules = {
  teamName: [
    { required: true, message: '请输入队伍名称', trigger: 'blur' },
    { min: 2, max: 20, message: '队伍名称长度为2-20个字符', trigger: 'blur' }
  ],
  teamPassword: [
    {
      required: true,
      message: '请输入队伍密码',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (form.teamState === 2 && (!value || value.length < 6)) {
          callback(new Error('加密队伍密码长度至少为6位'))
        } else {
          callback()
        }
      }
    }
  ]
}

// 关闭日期选择
const dateClose = () => {
  showDate.value = false
}

// 确认日期选择
const dateConfirm = (e: any) => {
  showDate.value = false
  form.expireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
}

// 提交表单
const submit = () => {
  formRef.value
    ?.validate()
    .then(async () => {
      console.log('点击事件触发')
      const res = await myAxios.post('/team/add', form)
      if (res?.code === 0 && res) {
        uni.showToast({
          title: '添加成功',
          icon: 'success',
          duration: 2000
        })
        uni.switchTab({
          url: '/pages/team/index' // 路径改为uni-app的页面路径
        })
      } else {
        uni.showToast({
          title: '添加失败',
          icon: 'fail',
          duration: 2000
        })
      }
    })
    .catch(e => {
      uni.$u.toast(e.message)
    })
}

// 重置表单
const reset = () => {
  formRef.value?.resetFields()
  formRef.value?.clearValidate()
}
</script>

<style lang="scss">
.container {
  padding: 15px;
}
</style>
